{extend name="public/layout" /}
{block name="title"}会议列表{/block}
{block name="head"}
<link rel="stylesheet" href="/public/plugins/dropload/dropload.css">
<style>
    .weui_bar__item_on {
        background: #0085cd;
        color: #fff;
    }

    .layui-m-layercont {
        text-align: left;
    }
    .layui-layer-setwin .layui-layer-close2{
        right:-16px !important;
    }
</style>
{/block}
{block name="body"}
<div class="weui-navbar">
    <div class="weui-navbar__item weui_bar__item_on" data-status="0" onclick="setStatus(this)">
        正在进行
    </div>
    <div class="weui-navbar__item" data-status="1" onclick="setStatus(this)">
        即将开始
    </div>
    <div class="weui-navbar__item" data-status="2" onclick="setStatus(this)">
        往期回顾
    </div>
</div>
<div style="height: 45px;"></div>
<style>
    .layui-m-layercont {
        padding: 20px;
    }
</style>
<ul class="mc-meeting-list" id="list"></ul>
<div id="page"></div>
{include file="public/footer"/}
{/block}
{block name="js"}
<script src="/public/plugins/dropload/dropload.min.js"></script>
<script src="/public/plugins/template/template.js"></script>
<script type="text/html" id="loading-tpl">
    {{ each data as val}}
    <li class="item">
        <a href="info.html?meeting_id={{ val.meeting_id}}&dept_id={{ val.dept_id}}" class="link"></a>
        <div class="thumb">
            <img src="{{ val.meeting_thumb}}" alt="">
        </div>
        <div class="info">
            <h2 class="tit hot-tit">
                {{ val.meeting_name}}
            </h2>
            <p class="desc">
                {{ val.meeting_description}}
            </p>
        </div>
        <div class="meeting-info">
            <div class="city">
                <span class="iconfont icon-xiazai18"></span>{{ val.meeting_place}}
            </div>
            <div class="date">
                <span class="iconfont icon-riqi2"></span> {{ val.start_time}}
            </div>
        </div>
    </li>
    {{ /each}}
</script>
<script type="text/html" id="ahead-tpl">
    {{ each data as val}}
    <li class="item ahead">
        <a href="info.html?meeting_id={{ val.meeting_id}}&dept_id={{ val.dept_id}}" class="link"></a>
        <div class="thumb">
            <img src="{{ val.meeting_thumb}}" alt="">
        </div>
        <div class="info">
            <h2 class="tit hot-tit">
                {{ val.meeting_name}}
            </h2>
            <p class="desc">
                {{ val.meeting_description}}
            </p>
        </div>
        <div class="meeting-info">
            <a onclick="baoming('{{ val.meeting_id}}')" class="enrol">立即报名</a>
            <div class="city">
                <span class="iconfont icon-xiazai18"></span> {{ val.meeting_place}}
            </div>
            <div class="date">
                <span class="iconfont icon-riqi2"></span> {{ val.start_time}}
            </div>
        </div>
    </li>
    <li class="friend-info">
        <p class="text">已有{{ val.meeting_real_number}} 人报名参加</p>
    </li>
    {{ /each}}
</script>
<script type="text/html" id="ever-tpl">
    {{ each data as val}}
    <li class="item ever">
        <a href="info.html?meeting_id={{ val.meeting_id}}&dept_id={{ val.dept_id}}" class="link"></a>
        <div class="thumb">
            <img src="{{ val.meeting_thumb}}" alt="">
        </div>
        <div class="info">
            <h2 class="tit">
                {{ val.meeting_name}}
            </h2>
            <p class="desc">
                {{ val.meeting_description}}
            </p>
        </div>
        <div class="meeting-info">
            <div class="city">
                <span class="iconfont icon-xiazai18"></span>{{ val.meeting_place}}
            </div>
            <div class="date">
                <span class="iconfont icon-riqi2"></span> {{ val.end_time}}
            </div>
            <div class="f-cb"></div>
            <div class="company-info">
                <span class="patch-block">参会企业<span class="clearly">{{ val.meeting_real_number}}</span>家</span>
            </div>
        </div>
    </li>
    <li class="meeting-news">
        <dl class="mc-text-col-list">
            {{ each val.meeting_content as content}}
            <dd class="news-item">
                <a href="{:url('meetingContent')}?meeting_id={{ content.meeting_id}}" class="link">
                    {{ content.title}}
                </a>
            </dd>
            {{ /each}}
        </dl>
        <span class="patch-block">
            <a href="{:url('meetingContent')}?meeting_id={{ val.meeting_id}}" class="weui-btn weui-btn_default" style="font-size:12px;">查看更多资讯</a>
        </span>
    </li>
    {{ /each}}
</script>
<script type="text/html" id="sign">
    <div class="enroll-box">
        <form id="infoForm">
            <input type="hidden" name="meeting_id" value="{{ meeting_id }}">
            <div class="weui-cells weui-cells_form">
                <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">您的姓名</label></div>
                    <div class="weui-cell__bd">
                        <input class="weui-input" type="text" name="name" value="" placeholder="请输入您的姓名">
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__hd">
                        <label class="weui-label">手机号码</label>
                    </div>
                    <div class="weui-cell__bd">
                        <input class="weui-input" type="tel" name="mobile" id="mobile" placeholder="请输入手机号">
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">短信验证</label></div>
                    <div class="weui-cell__bd">
                        <input class="weui-input" type="number" name="mcode" placeholder="请输入验证码">
                    </div>
                    <div class="weui-cell__ft">
                        <a class="weui-vcode-btn weui-btn_disabled" href="javascript:;" onclick="sendSms();" id="send-sms">获取验证码</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</script>
<script>
    function baoming(meeting_id) {
        var html = template('sign', {meeting_id: meeting_id});
        layer.open({
            content: html
            ,btn:['确定','取消']
            ,title:null
            , yes: function (index) {
                $.post("{:url('sign')}",$('#infoForm').serialize(),function (res) {
                    if(res.code==1){
                        layer.msg('报名成功！')
                    }else{
                        alert(res.msg);
                    }
                });
            }
        });
    };

    var parms = {
        meeting_state: 0, //状态 0正在进行 1 即将开始 2 往期回顾
        page: 0,
        dept_id: "{$Request.param.dept_id}"
    };
    // dropload
    var drop = $('#page').dropload({
        scrollArea : window,
        domDown: {
            domClass: 'dropload-down',
            domRefresh: '<div class="dropload-refresh">↑上拉加载更多会议</div>',
            domLoad: '<div class="dropload-load">○加载会议中...</div>',
            domNoData: '<div class="dropload-noData">没有更多会议了</div>'
        },
        loadDownFn: function (me) {
            parms.page++;
            var _=this;
            // 拼接HTML
            $.post('{:url("index")}', parms, function (res) {
                if (parms.page >= res.last_page) {
                    if(!res.last_page){
                        _.domDown.domNoData='<div class="dropload-noData">没有会议了</div>'
                    }
                    me.noData();
                    me.lock();
                }
                var tpl = {0: 'loading-tpl', 1: 'ahead-tpl', 2: 'ever-tpl'};
                var html = template(tpl[parms['meeting_state']], res);
                $('#list').append(html);
                me.resetload();
            });
        }
    });

    function setStatus(obj) {
        var status = $(obj).data('status');
        $('#list').empty();
        parms.meeting_state = status;
        parms.page = 0;
        drop.unlock();
        drop.noData(false);
        $('#list').empty();
        drop.resetload();
        $(obj).addClass('weui_bar__item_on').siblings().removeClass('weui_bar__item_on');
    }

    function sendSms() {
        var mobile = $('#mobile').val();
        if(mobile==''){
            alert('请输入手机号');
            return false;
        }
        $.post('{:url("Public/sendSms")}', {
            mobile: mobile
        }, function (res) {
            if (res.code==1) {
                var second = 60;
                var inter = setInterval(function () {
                    var dom = $('#send-sms');
                    second--;
                    if (second>0) {
                        console.info(second);
                        dom.text('等待' + second + '秒');
                    } else {
                        dom.text('发送短信');
                        clearInterval(inter);
                    }
                }, 1000)
            }else{
                alert(res.msg);
            }
        })
    }
</script>
{/block}